<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
import user from '@/api/user';
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 类型比例接口
   async echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      let res = await user.people_type_counting();
      let data = res.data;
          // let total =data[0].coun + data[1].coun+ data[2].coun +data[3].coun +data[4].coun;
          // that.$emit('getTotal', total);
          let names = ['住户','访客','服务人员','租户','从业人员']
          let option = {
            legend: {
              orient: "vertical",
              x: "left",
              data: names,
              textStyle: {
                color: "#e9ebee"
              }
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            calculable: false,
            series: [
              {
                name: "",
                type: "pie",
                radius: "45%",
                center: ["60%", "50%"],
                data: data
              }
            ]
          };
          myChart.setOption(option);
        
    }
  }
};
</script>

<style>
</style>